<!--
*  功能描述：添加申请页面
 -->
<template>
  <div>
    <!-- 选项卡 -->
    <div>
      <el-tabs type="border-card" v-model="requesInfo.RequestType">
        <el-tab-pane label="请假" name="请假">
          <el-form ref="form" :model="requesInfo" label-width="80px">
            <el-form-item label="请假事由">
              <el-input v-model="requesInfo.Reason"></el-input>
            </el-form-item>
            <el-form-item label="申请时间">
              <el-col :span="11">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="requesInfo.BeginTime"
                  style="width: 100%"
                ></el-date-picker>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="requesInfo.EndTime"
                  style="width: 100%"
                ></el-date-picker>
              </el-col>
            </el-form-item>
              <el-form-item label="考勤统计">
                <el-input v-model="requesInfo.Overtime"></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input
                  type="textarea"
                  v-model="requesInfo.RequestRemark"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="AddRequest()"
                  >立即创建</el-button
                >
                <el-button>取消</el-button>
              </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="出差" name="出差">
          <el-form ref="form" :model="requesInfo" label-width="80px">
            <el-form-item label="出差事由">
              <el-input v-model="requesInfo.Reason"></el-input>
            </el-form-item>
            <el-form-item label="出差地点">
              <el-input v-model="requesInfo.Place"></el-input>
            </el-form-item>
            <el-form-item label="出差时间">
              <el-col :span="11">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="requesInfo.BeginTime"
                  style="width: 100%"
                ></el-date-picker>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="requesInfo.EndTime"
                  style="width: 100%"
                ></el-date-picker>
              </el-col>
            </el-form-item>
              <el-form-item label="考勤统计">
                <el-input v-model="requesInfo.Overtime"></el-input>
              </el-form-item>
              <el-form-item label="自驾公里数">
                <el-input v-model="requesInfo.DrivingNum"></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input
                  type="textarea"
                  v-model="requesInfo.RequestRemark"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="AddRequest()"
                  >立即创建</el-button
                >
                <el-button>取消</el-button>
              </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="外勤" name="外勤">
          <el-form ref="form" :model="requesInfo" label-width="80px">
            <el-form-item label="外勤事由">
              <el-input v-model="requesInfo.Reason"></el-input>
            </el-form-item>
            <el-form-item label="外勤地点">
              <el-input v-model="requesInfo.Place"></el-input>
            </el-form-item>
            <el-form-item label="外勤工作时间">
              <el-col :span="11">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="requesInfo.BeginTime"
                  style="width: 100%"
                ></el-date-picker>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="requesInfo.EndTime"
                  style="width: 100%"
                ></el-date-picker>
              </el-col>
            </el-form-item>
              <el-form-item label="考勤统计">
                <el-input v-model="requesInfo.Overtime"></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input
                  type="textarea"
                  v-model="requesInfo.RequestRemark"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="AddRequest()"
                  >立即创建</el-button
                >
                <el-button>取消</el-button>
              </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="未打卡" name="未打卡">
          <el-form ref="form" :model="requesInfo" label-width="80px">
            <el-form-item label="未打卡事由">
              <el-input v-model="requesInfo.Reason"></el-input>
            </el-form-item>
            <el-form-item label="未打卡时间">
              <el-col :span="11">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="requesInfo.BeginTime"
                  style="width: 100%"
                ></el-date-picker>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="requesInfo.EndTime"
                  style="width: 100%"
                ></el-date-picker>
              </el-col>
            </el-form-item>
              <el-form-item label="考勤统计">
                <el-input v-model="requesInfo.Overtime"></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input
                  type="textarea"
                  v-model="requesInfo.RequestRemark"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="AddRequest()"
                  >立即创建</el-button
                >
                <el-button>取消</el-button>
              </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="公司活动" name="公司活动">
          <el-form ref="form" :model="requesInfo" label-width="80px">
            <el-form-item label="公司活动名称">
              <el-input v-model="requesInfo.Reason"></el-input>
            </el-form-item>
            <el-form-item label="公司活动地点">
              <el-input v-model="requesInfo.Place"></el-input>
            </el-form-item>
            <el-form-item label="申请时间">
              <el-col :span="11">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="requesInfo.BeginTime"
                  style="width: 100%"
                ></el-date-picker>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="requesInfo.EndTime"
                  style="width: 100%"
                ></el-date-picker>
              </el-col>
            </el-form-item>
              <el-form-item label="考勤统计">
                <el-input v-model="requesInfo.Overtime"></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input
                  type="textarea"
                  v-model="requesInfo.RequestRemark"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="AddRequest()"
                  >立即创建</el-button
                >
                <el-button>取消</el-button>
              </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="部门活动" name="部门活动">
          <el-form ref="form" :model="requesInfo" label-width="80px">
            <el-form-item label="部门活动名称">
              <el-input v-model="requesInfo.Reason"></el-input>
            </el-form-item>
            <el-form-item label="部门活动地点">
              <el-input v-model="requesInfo.Place"></el-input>
            </el-form-item>
            <el-form-item label="申请时间">
              <el-col :span="11">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="requesInfo.BeginTime"
                  style="width: 100%"
                ></el-date-picker>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="requesInfo.EndTime"
                  style="width: 100%"
                ></el-date-picker>
              </el-col>
            </el-form-item>
              <el-form-item label="考勤统计">
                <el-input v-model="requesInfo.Overtime"></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input
                  type="textarea"
                  v-model="requesInfo.RequestRemark"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="AddRequest()"
                  >立即创建</el-button
                >
                <el-button>取消</el-button>
              </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="加班离岗" name="加班离岗">
          <el-form ref="form" :model="requesInfo" label-width="80px">
            <el-form-item label="加班离岗事由">
              <el-input v-model="requesInfo.Reason"></el-input>
            </el-form-item>
            <el-form-item label="申请时间">
              <el-col :span="11">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="requesInfo.BeginTime"
                  style="width: 100%"
                ></el-date-picker>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="requesInfo.EndTime"
                  style="width: 100%"
                ></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="考勤统计">
              <el-input v-model="requesInfo.Overtime"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input
                type="textarea"
                v-model="requesInfo.RequestRemark"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="AddRequest()"
                >立即创建</el-button
              >
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      requesInfo: {
        RequestType:"",
        Place: "",
        Reason: "",
        BeginTime: "",
        EndTime: "",
        Overtime: "",
        Driving: "",
        DrivingNum: "",
        RequestRemark: "",
      },
      UserName: "",
      UserID: "",
      dictionaries: [],
    };
  },
  methods: {
    GetDictionaries() {
      this.UserID = sessionStorage.getItem("UserID");
      this.UserName = sessionStorage.getItem("UserName");
      console.log(this.UserName,this.UserID);
    },
    //添加方法
    AddRequest() {
      console.log(this.requesInfo);
      this.$http
        .post(
          `Attendance/AddRequest?currentStaffId=${this.UserID}&currentStaffName=${this.UserName}`,
          this.requesInfo
        )
        .then((res) => {
          if (res.data > 0) {
            alert("添加成功");
          }
        });
    },
  },
  created() {
    this.GetDictionaries();
    this.requesInfo.RequestType=this.$route.query.RequestType
    console.log(this.$route.query.RequestType)
  },
};
</script>

<style>
</style>